<template>
  <z-container>
    <z-header height="28px">PageHeader （页头）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">页头类型</z-col>
        <z-col :span="4">
          <z-page-header type="header" @back="goBack" content="详情页面"></z-page-header>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">标题类型</z-col>
        <z-col :span="4">
          <z-page-header type="title" @next="goNext" content="概览页面" description="查看详情"></z-page-header>
        </z-col>
      </z-row>
    </z-main>
  </z-container>

</template>
<script>
export default {
  name: 'cPageHeader',
  methods: {
    goBack() {
      console.log('go back');
    },
    goNext() {
      console.log('go next');
    }
  }
}
</script>